import 'package:flutter/material.dart';
import 'package:flutter_swiper_view/flutter_swiper_view.dart';
import 'package:get/get.dart';
import 'package:xmshop/app/utils/AliIcons.dart';
import 'package:xmshop/app/utils/CommonUtils.dart';
import 'package:xmshop/app/utils/KeepAliveWrapper.dart';
import 'package:xmshop/app/utils/ScreenSizeUtil.dart';

import '../controllers/home_controller.dart';

class HomeView extends GetView<HomeController> {
  const HomeView({super.key});

  Widget titleBar() {
    Widget content = AppBar(
      elevation: 0,
      centerTitle: true,
      backgroundColor:
          controller.overThreshold.value ? Colors.white : Colors.transparent,
      leading:
          controller.overThreshold.value
              ? const Text('')
              : Icon(AliIcons.xiaomi, color: Colors.white),
      leadingWidth:
          controller.overThreshold.value ? su.width(40) : su.width(140),
      title: AnimatedContainer(
        width: su.width(controller.overThreshold.value ? 800 : 620),
        height: su.height(96),
        duration: const Duration(milliseconds: 300),
        decoration: BoxDecoration(
          color: Color.fromARGB(237, 245, 237, 237),
          borderRadius: BorderRadius.circular(su.height(96)),
        ),
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Padding(
              padding: EdgeInsets.only(left: 10),
              child: Icon(
                Icons.search_rounded,
                color: Colors.grey,
                size: su.height(60),
              ),
            ),

            Text('手机', style: TextStyle(fontSize: 14, color: Colors.black54)),
          ],
        ),
      ),
      actions: [
        IconButton(
          onPressed: () {
            clog(TAG, 'qr_code_icon is clicked', 111);
          },
          icon: Icon(AliIcons.qr_code, color: Colors.white),
        ),
        IconButton(
          onPressed: () {},
          icon: Icon(AliIcons.services, color: Colors.white),
        ),
      ],
    );
    return content;
  }

  Widget listWidget() {
    Widget body = ListView.builder(
      shrinkWrap: true,
      physics: const AlwaysScrollableScrollPhysics(),
      controller: controller.scrollController,
      itemCount: controller.list.length,
      itemBuilder: (context, index) {
        if (index == 0) {
          return Container(
            width: double.infinity,
            height: su.height(682),
            child: Image.network(
              'https://www.itying.com/images/focus/focus02.png',
              fit: BoxFit.cover,
            ),
          );
        }
        if (index == 1) {
          return SizedBox(
            width: su.fullScreenWidth(),
            height: su.height(92),
            child: Image.asset('assets/images/OfficialMall.png'),
          );
        }
        if (index == 3) {
          return menusWidget();
        }
        return Text(
          '列表中的第$index个元素',
          style: TextStyle(fontSize: 30, fontWeight: FontWeight.bold),
        );
      },
    );
    return body;
  }

  Widget stackWidget() {
    Widget body = Stack(
      alignment: AlignmentDirectional.topCenter,
      children: [
        Positioned(
          top: 0,
          left: 0,
          right: 0,
          bottom: 0,
          child: Container(
            width: double.infinity,
            height: double.infinity,
            color: Colors.blueGrey,
          ),
        ),
        Positioned(left: 0, right: 0, top: 0, bottom: 0, child: listWidget()),
        Positioned(left: 0, right: 0, top: 0, child: Obx(() => titleBar())),
      ],
    );
    // body = Expanded(child: body);
    return body;
  }

  SwiperPagination pagination() {
    SwiperPagination body = SwiperPagination(
      margin: const EdgeInsets.all(0.0),
      builder: SwiperCustomPagination(
        builder: (BuildContext context, SwiperPluginConfig config) {
          return ConstrainedBox(
            constraints: const BoxConstraints.expand(height: 20.0),
            child: Row(
              children: <Widget>[
                Expanded(
                  child: Align(
                    alignment: Alignment.center,
                    child: const RectSwiperPaginationBuilder(
                      color: Colors.black12,
                      activeColor: Colors.black,
                    ).build(context, config),
                  ),
                ),
              ],
            ),
          );
        },
      ),
    );
    return body;
  }

  Widget menusWidget() {
    Widget body = Swiper(
      itemCount: 2,
      itemBuilder: (context, index) {
        return gridWidget();
      },
      pagination: pagination(),
    );

    body = Container(
      color: Colors.grey,
      width: su.fullScreenWidth(),
      height: su.height(500),
      child: body,
    );
    return body;
  }

  Widget gridWidget() {
    Widget body = GridView.builder(
      padding: EdgeInsets.all(0),
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 5,
        crossAxisSpacing: su.width(20),
        mainAxisSpacing: su.height(20),
      ),
      itemCount: 10,
      itemBuilder: (context, index) {
        return gridItemWidget(
          'https://miapp.itying.com/public/upload/mAUPB472d5kAPc2CPxANLaMj.jpg',
          '手机',
        );
      },
    );
    return body;
  }

  Widget gridItemWidget(String imageUrl, String goodName) {
    Widget body = Column(
      children: [
        Container(
          width: su.width(140),
          height: su.height(140),
          decoration: BoxDecoration(color: Colors.blueGrey),
          alignment: Alignment.center,
          child: Image.network(imageUrl, fit: BoxFit.cover),
        ),
        Text(goodName),
      ],
    );
    return body;
  }

  @override
  Widget build(BuildContext context) {
    return KeepAliveWrapper(child: Scaffold(body: stackWidget()));
  }
}
